<template>
  <yt-page title="应急管理">
    <yt-group :group="false" :searchApi="searchApi">
      <div slot-scope="scope">
        <yt-view @click="onClick(scope)" class="row">
          <div class="img-wrap">
            <img class="bg" :src="_.get(scope, 'enterprise_name.attributes.EnterprisePic') ? (scope.enterprise_name.attributes.EnterprisePic[0] ? scope.enterprise_name.attributes.EnterprisePic[0].url : require('./img/bg.jpg') ) : require('./img/bg.jpg')">
            <img class="status" :src="require('./img/before.png')" v-if="scope.state === 0">
            <img class="status" :src="require('./img/enter.png')" v-if="scope.state === 1">
            <img class="status" :src="require('./img/after.png')" v-if="scope.state === 2">
          </div>
          <p class="name">{{_.get(scope, 'enterprise_name.attributes.EnterpriseName')}}({{scope.accident_type }})</p>
          <div class="info">
            <span><img class="icon" :src="require('./img/pos.png')">{{ scope.accident_place }}</span>
            <span><img class="icon" :src="require('./img/time.png')">{{ scope.createdAt | formatTime }}</span>
          </div>
        </yt-view>
        <yt-split></yt-split>
      </div>
    </yt-group>
  </yt-page>
</template>

<script>
import { GetStore, Store, JudgeRole } from '@/store'
import { ReplaceDictionary } from '@/common/utils/index.js'
import { commonApi } from '@/common/api/commonApi.js'
import { bridge } from '@/common/plugin/utils/bridge'
import { Info } from './router'
import _ from 'lodash'

export default {
  name: 'emergencyList',
  data() {
    return {
      searchApi: async ({ skip, limit }) => {
        let enterpriseId = JudgeRole()
          .enterprise(() => {
            return (GetStore(Store.enterprise) || {}).id
          })
          .government(() => {
            return (GetStore(Store.enterprise) || {}).id
          })
          .default()
        let obj = enterpriseId
          ? {
            equalTo: { enterpriseId: enterpriseId },
            notEqualTo: { state: 2 }
          }
          : { notEqualTo: { state: 2 } }
        let p = [
          commonApi.dictionary('Accident_type'),
          commonApi.search('yj_emergency_information', {
            skip,
            limit,
            include: ['enterprise_name'],
            ...obj
          })
        ]
        let [accidentTypeDic, results] = await Promise.all(p)
        return ReplaceDictionary(results, { accident_type: accidentTypeDic })
      }
    }
  },
  methods: {
    onClick(data) {
      this.$router.$push({
        path: Info.path,
        query: {
          id: data.id,
          title: _.get(data, 'enterprise_name.attributes.EnterpriseName')
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.row
  padding 15px
  background-color #ffffff
.name
  margin 15px 0
  font-size 16px
  color #000000
.info
  display flex
  align-items center
  justify-content space-between
  font-size 14px
  color #808080
.icon
  position relative
  top -1px
  display inline-block
  vertical-align middle
  margin-right 3px
  width 15px
  height 15px
.img-wrap
  position relative
  width 100%
  height 160px
  .bg
    width 100%
    height 100%
.status
  position absolute
  right -5px
  top -5px
</style>
